<template>
  <div
    class="popover w-[120px] h-[240px] pt-[10px] mt-[-25px] mr-[5px] bg-[#232329] float-right rounded-lg"
    style="color: aliceblue"
    v-if="showButtons"
  >
    <el-button class="btn" @click="updateTemplate">
      <img
        class="w-[12px] mr-[5px]"
        src="../../assets/images/chong_mm.png"
      />重命名
    </el-button>
    <el-button class="btn" @click="previewTemplate">
      <img
        class="w-[12px] mr-[5px]"
        src="../../assets/images/yu_lan_xiao.png"
      />预览
    </el-button>
    <el-button class="btn" @click="editTemplate">
      <img
        class="w-[12px] mr-[5px]"
        src="../../assets/images/bian_ji_xiao.png"
      />编辑
    </el-button>
    <el-button class="btn" @click="exportTemplate">
      <img
        class="w-[12px] mr-[5px]"
        src="../../assets/images/dao_chu_xiao.png"
      />导出
    </el-button>
    <el-button class="btn" @click="generateCode">
      <img
        class="w-[12px] mr-[5px]"
        src="../../assets/images/shengc_daima_xiao.png"
      />生成代码
    </el-button>
    <el-button class="btn" v-if="release" @click="releaseTemplate">
      <img
        class="w-[12px] mr-[5px]"
        src="../../assets/images/fa_bu_xiao.png"
      />发布
    </el-button>
    <el-button class="btn" @click="backTemplate">
      <img
        class="w-[12px] mr-[5px]"
        src="../../assets/images/che_xiao_xiao.png"
      />撤销
    </el-button>
    <el-button class="btn" @click="deleteTemplate">
      <img
        class="w-[12px] mr-[5px]"
        src="../../assets/images/shan_chu_xiao.png"
      />删除
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const props = defineProps({
  release: {
    type: Boolean,
    default: false,
  },
  showButtons: {
    type: Boolean,
    default: true,
  },
  id: {
    type: String,
    default: "",
  },
});

const previewTemplate = () => {};
const editTemplate = () => {};
const updateTemplate = () => {};
const exportTemplate = () => {};
const generateCode = () => {};
const releaseTemplate = () => {};
const backTemplate = () => {};
const deleteTemplate = () => {};
</script>

<style lang="scss" scoped>
.el-button {
  border: 0px solid #fff !important;
  margin-left: 10px;
}
.el-button:hover {
  background-color: var(--hover-color);
}
.popover {
  position: relative;
}
.btn {
  float: left;
}
</style>
